<template>
	<view class="vi_timeline_templat" :class="mainClass">
		<view class="vi_timeline_frame vi_clearFix" :style="frameStyle">
			<view class="vi_timeline_arr" :style="arrStyle" v-if="templateSetting.useArr"></view>
			<view class="vi_timeline_time" v-if="!hideTime" @click="onEvent('time')">
				{{dateFormat(inDataSet[keySetting.itemTime], timeFormat||"YYYY-MM-DD hh:mm")}}
			</view>
			<view class="vi_timeline_head" @click="onEvent('title')">
				<vi-style-controller
					:type="templateSetting.type"
					:color="templateSetting.color"
					plain
					inline
					active>
					<text :class="inDataSet.class" :style="inDataSet.style">{{inDataSet[keySetting.itemName]}}</text>
				</vi-style-controller>
			</view>
			<view class="vi_timeline_body" v-html="inDataSet[keySetting.itemContent]" @click="onEvent('content')"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"",
		props: {
			type:{
				type:[String,null],
				default:""
			},
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			dataSet:{
				type:[Object,null],
				default: ()=>({})
			},
			keys:{
				type:[Object,null],
				default:()=>({})
			},
			hideTime:{
				type:[Boolean,null],
				default:false
			},
			timeFormat:{
				type:[String,null],
				default: ""
			},
			mode:{
				type:[String,null],
				default:""
			},
			templateSet:{
				type:[Object,null],
				default:()=>({})
			}
		},
		data() {
			return {
				dicKeys:{
					itemName: "name",	//标题键名
					itemTime: "time",	//时间键名
					itemContent: "content",	//文字内容键名
				},
				dicTemplateSet:{
					type:this.type,
					color:this.color,
					textColor:this.textColor,
					backgroundColor:"#fff",
					borderWidth:1,
					borderColor:"#eee",
					borderType:"solid",
					spaceInside:"0.5em",
					radius:"0.5em",
					shadow:"",		//箭头为css元素实现，使用箭头时不建议加阴影
					useArr:true
				}
			}
		},
		computed: {
			inDataSet(){
				return this.dataSet ||{}
			},
			keySetting(){
				if(this.$api.isObject(this.keys)){
					return Object.assign({},this.dicKeys,this.keys)
				}
				return this.dicKeys
			},
			templateSetting(){
				if(this.$api.isObject(this.templateSet)){
					return Object.assign({},this.dicTemplateSet,this.templateSet)
				}
				return this.dicTemplateSet
			},
			mainClass(){
				let clsL ="vi_timeline_left",
					clsR ="vi_timeline_right";
				if(this.mode!="across"){
					return this.mode =="left"? clsL:clsR
				}
			},
			frameStyle(){
				let res ={};
				let setting = this.templateSetting;
				if(setting.backgroundColor){
					res["background-color"] = setting.backgroundColor
				}
				if(setting.borderWidth){
					res["border-width"] = setting.borderWidth +(this.$api.isNumber(setting.borderWidth, true)?"px":"");
					res["border-color"] = setting.borderColor;
					res["border-style"] = setting.borderType;
				}
				let spaceInside = setting.spaceInside;
				if(this.$api.isValue(spaceInside)){
					res["padding"] = this.$api.isArray(spaceInside)? spaceInside.join(" ") :spaceInside;
				}
				if(setting.radius){
					res["border-radius"] = setting.radius;
				}
				if(setting.shadow){
					res["box-shadow"] = setting.shadow;
				}
				return this.$api.objToStr(res)
			},
			arrStyle(){
				let res ={};
				let setting = this.templateSetting;
				if(setting.backgroundColor){
					res["background-color"] = setting.backgroundColor
				}
				if(setting.borderWidth){
					let borW = setting.borderWidth +(this.$api.isNumber(setting.borderWidth, true)?"px":"");
					let arrAlign, W;
					arrAlign = this.mode=="across"? (this.inDataSet._align? "left":"right") :this.mode||"left";
					W = arrAlign =="left"? [0, 0, borW, borW].join(" ") :[borW, borW, 0, 0].join(" ");
					res[arrAlign=="left"?"right":"left"] = `calc(100% - 0.4em + ${borW})`;
					res["border-width"] = W;
					res["border-color"] = setting.borderColor;
					res["border-style"] = setting.borderType;
				}
				return this.$api.objToStr(res)
			}
		},
		methods: {
			dateFormat(value, format){
				if(!value){
					return ""
				}
				return this.$api.dateFormat(value, {format})
			},
			//触发事件
			onEvent(type){
				this.$emit("event", {
					type,
					item: this.inDataSet
				})
			}
		},
	}
</script>

<style lang="scss">
.vi_timeline_templat{
	.vi_timeline_frame{
		position: relative;
		box-sizing: border-box;
	}
	.vi_timeline_arr{
		position: absolute;
		top:calc(50% - 0.4em);
		width: 0.8em;
		height: 0.8em;
		box-sizing: border-box;
		transform: rotate(45deg);
	}
	.vi_timeline_time{
		margin-bottom: 0.25em;
		font-size: 85%;
		color: $vi-txtColor-tips;
	}
	.vi_timeline_head{
		margin-bottom: 0.25em;
		clear: both;
	}
	.vi_timeline_body{
		line-height: 1.5;
		font-size: 85%;
	}
	&.vi_timeline_right{
		.vi_timeline_time,{
			text-align: right;
		}
		.vi_timeline_head,
		.vi_timeline_body{
			float: right;
		}
	}
}
.vi_clearFix::after{content:""; clear:both; height: 0; display: block; visibility: hidden; line-height: 0;}
</style>
